import React from 'react';
import { Card, Tabs, Button, Table, Space, Input, Modal, Form, Select, Switch } from 'antd';
import type { TabsProps } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { Search } = Input;

// 模拟用户数据
interface UserRecord {
  key: string;
  name: string;
  email: string;
  role: string;
  status: boolean;
  createTime: string;
}

const userData: UserRecord[] = [
  { key: '1', name: '管理员', email: 'admin@example.com', role: '超级管理员', status: true, createTime: '2023-01-15' },
  { key: '2', name: '张三', email: 'zhangsan@example.com', role: '普通用户', status: true, createTime: '2023-02-20' },
  { key: '3', name: '李四', email: 'lisi@example.com', role: '普通用户', status: false, createTime: '2023-03-10' },
  { key: '4', name: '王五', email: 'wangwu@example.com', role: '编辑', status: true, createTime: '2023-04-05' },
];

// 模拟角色数据
const roleData = [
  { key: '1', name: '超级管理员', description: '系统最高权限', permissions: '全部权限', createTime: '2023-01-15' },
  { key: '2', name: '管理员', description: '系统管理权限', permissions: '管理权限', createTime: '2023-01-15' },
  { key: '3', name: '编辑', description: '内容编辑权限', permissions: '编辑权限', createTime: '2023-01-15' },
  { key: '4', name: '普通用户', description: '基础操作权限', permissions: '基础权限', createTime: '2023-01-15' },
];

const SystemManagementPage: React.FC = () => {
  // 模态框状态
  const [userModalVisible, setUserModalVisible] = React.useState(false);
  const [roleModalVisible, setRoleModalVisible] = React.useState(false);
  const [currentUser, setCurrentUser] = React.useState<UserRecord | null>(null);
  const [currentRole, setCurrentRole] = React.useState<any>(null);

  // 表单实例
  const [userForm] = Form.useForm();
  const [roleForm] = Form.useForm();

  // 用户表格列
  const userColumns: ColumnsType<UserRecord> = [
    { title: '用户名', dataIndex: 'name', key: 'name' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '角色', dataIndex: 'role', key: 'role' },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status', 
      render: (status: boolean) => (
        <Switch checked={status} disabled />
      )
    },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    { 
      title: '操作', 
      key: 'action', 
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEditUser(record)}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />}>删除</Button>
        </Space>
      ),
    },
  ];

  // 角色表格列
  const roleColumns: ColumnsType<any> = [
    { title: '角色名称', dataIndex: 'name', key: 'name' },
    { title: '角色描述', dataIndex: 'description', key: 'description' },
    { title: '权限范围', dataIndex: 'permissions', key: 'permissions' },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    { 
      title: '操作', 
      key: 'action', 
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEditRole(record)}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />} disabled={record.name === '超级管理员'}>删除</Button>
        </Space>
      ),
    },
  ];

  // 处理编辑用户
  const handleEditUser = (record: UserRecord) => {
    setCurrentUser(record);
    userForm.setFieldsValue(record);
    setUserModalVisible(true);
  };

  // 处理编辑角色
  const handleEditRole = (record: any) => {
    setCurrentRole(record);
    roleForm.setFieldsValue(record);
    setRoleModalVisible(true);
  };

  // 处理添加用户
  const handleAddUser = () => {
    setCurrentUser(null);
    userForm.resetFields();
    setUserModalVisible(true);
  };

  // 处理添加角色
  const handleAddRole = () => {
    setCurrentRole(null);
    roleForm.resetFields();
    setRoleModalVisible(true);
  };

  // 标签页配置
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '用户管理',
      children: (
        <Card variant="outlined" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAddUser}>添加用户</Button>}>
          <Search
            placeholder="搜索用户"
            allowClear
            style={{ marginBottom: 16, width: 240 }}
            prefix={<SearchOutlined />}
          />
          <Table columns={userColumns} dataSource={userData} pagination={{ pageSize: 10 }} />
        </Card>
      ),
    },
    {
      key: '2',
      label: '角色管理',
      children: (
        <Card variant="outlined" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAddRole}>添加角色</Button>}>
          <Search
            placeholder="搜索角色"
            allowClear
            style={{ marginBottom: 16, width: 240 }}
            prefix={<SearchOutlined />}
          />
          <Table columns={roleColumns} dataSource={roleData} pagination={{ pageSize: 10 }} />
        </Card>
      ),
    },
    {
      key: '3',
      label: '权限配置',
      children: (
        <Card variant="outlined">
          <div style={{ padding: '80px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>权限配置功能开发中...</p>
          </div>
        </Card>
      ),
    },
    {
      key: '4',
      label: '系统设置',
      children: (
        <Card variant="outlined">
          <div style={{ padding: '80px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <p style={{ fontSize: '18px', color: '#666' }}>系统设置功能开发中...</p>
          </div>
        </Card>
      ),
    },
  ];

  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>系统管理</h1>
      <Tabs defaultActiveKey="1" items={items} />
      
      {/* 用户编辑/添加模态框 */}
      <Modal
        title={currentUser ? "编辑用户" : "添加用户"}
        open={userModalVisible}
        onCancel={() => setUserModalVisible(false)}
        footer={null}
      >
        <Form
          form={userForm}
          layout="vertical"
          onFinish={(values) => {
            console.log('用户表单数据:', values);
            setUserModalVisible(false);
          }}
        >
          <Form.Item name="name" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }]}>
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
            <Select placeholder="请选择角色">
              <Option value="超级管理员">超级管理员</Option>
              <Option value="管理员">管理员</Option>
              <Option value="编辑">编辑</Option>
              <Option value="普通用户">普通用户</Option>
            </Select>
          </Form.Item>
          <Form.Item name="status" label="状态" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item>
            <Space style={{ float: 'right' }}>
              <Button onClick={() => setUserModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">确定</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
      
      {/* 角色编辑/添加模态框 */}
      <Modal
        title={currentRole ? "编辑角色" : "添加角色"}
        open={roleModalVisible}
        onCancel={() => setRoleModalVisible(false)}
        footer={null}
      >
        <Form
          form={roleForm}
          layout="vertical"
          onFinish={(values) => {
            console.log('角色表单数据:', values);
            setRoleModalVisible(false);
          }}
        >
          <Form.Item name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名称' }]}>
            <Input placeholder="请输入角色名称" />
          </Form.Item>
          <Form.Item name="description" label="角色描述" rules={[{ required: true, message: '请输入角色描述' }]}>
            <Input.TextArea placeholder="请输入角色描述" />
          </Form.Item>
          <Form.Item name="permissions" label="权限范围" rules={[{ required: true, message: '请选择权限范围' }]}>
            <Select placeholder="请选择权限范围">
              <Option value="全部权限">全部权限</Option>
              <Option value="管理权限">管理权限</Option>
              <Option value="编辑权限">编辑权限</Option>
              <Option value="基础权限">基础权限</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space style={{ float: 'right' }}>
              <Button onClick={() => setRoleModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">确定</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SystemManagementPage;